<template>
	<view class="content">
		<u-navbar bgColor="transparent" titleStyle="color:#fff" title="云矿石转换" leftIconColor="#fff" :autoBack="true"
			:placeholder="false">
		</u-navbar>
		<view style="height: 8vh;"></view>
		<view class="content-box">
			<view class="entry">
				<view class="content-title">
					可转云矿石
				</view>
				<view>
					{{money || 0}}
				</view>
			</view>
			<view class="entry">
				<view class="content-title">
					提现钱包
				</view>
				<view>
					{{wallet || 0}}USDT
				</view>
			</view>
			<view class="entry">
				<view class="content-title">
					云矿石
				</view>
				<u--input type="number" maxlength="16" border="none" color="#fff" v-model="number"
					placeholder="请输入转换云矿石数量">
					<template slot="suffix">
						{{ Number(number / 7.5).toFixed(2)}}U
					</template>
				</u--input>
			</view>
			<view class="entry">
				<view class="content-title">
					支付密码
				</view>
				<u--input maxlength="16" :type="pass_type" border="none" color="#fff" v-model="password"
					placeholder="请输入支付密码">
					<template slot="suffix">
						<u-icon v-if="pass_type == 'password'" name="eye-fill" color="#fff" size="18"
							@click="changeType"></u-icon>
						<u-icon v-else name="eye-off" color="#fff" size="18" @click="changeType"></u-icon>
					</template>
				</u--input>
			</view>
			<view class="content-title">
				温馨提示
			</view>
			<view class="tips">
				1.余额转换按照7.5云矿石:1U转换
			</view>
			<view class="btn" @click="getBalance">
				<u-button size="large" class="btn-color"
					color="linear-gradient( 90deg, #C8F673 0%, #98F083 100%)"
					type="primary" text="确认" shape="circle"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				password: '',
				pass_type: 'password',
				number: '',
				wallet: '',
				money: '',
				usdt: 0
			}
		},
		onLoad() {
			this.getInfo()
		},
		watch: {
			// 监听输入数量 只允许输入小数点后两位
			number(value) {
				if (value > parseFloat(this.money)) {
					this.number = String(this.money)
				} else {
					value = value.toString()
					const index = value.indexOf('.')
					if (index !== -1) {
						if (value.substring(index + 1).length > 2) {
							value = value.substring(0, value.length - 1)
							this.number = parseFloat(value).toFixed(2)
						}
					}
				}
			}
		},
		methods: {
			changeType() {
				if (this.pass_type == 'password') {
					this.pass_type = 'text'
				} else {
					this.pass_type = 'password'
				}
			},
			getInfo() {
				let params = {

				}
				this.$Request({
					method: 'POST',
					url: '/api/Personal/balanceConversion',
					data: params
				}).then(res => {
					if (res.code == 1) {
						this.money = res.data.balance
						this.wallet = res.data.withdrawal
						console.log(res, 123)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			getBalance() {
				if (this.number == '') {
					uni.showToast({
						title: '金额不能为空',
						icon: 'none'
					})
					return
				}
				if (this.password == '') {
					uni.showToast({
						title: '密码不能为空',
						icon: 'none'
					})
					return
				}
				let params = {
					num: this.number,
					password: this.password,
				}
				this.$Request({
					method: 'POST',
					url: '/api/Personal/balanceConversionPost',
					data: params
				}).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: '转换成功！',
							icon: 'none'
						})
						this.getInfo()
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #17191A;
	}
	.btn-color {
		color: #17191A !important;
	}
</style>
<style lang="scss" scoped>
	.content {
		background-image: url('../../../static/my/my-bg.png');
		background-repeat: no-repeat;
		background-size: 100% 558rpx;
		.content-box {
			padding: 30rpx;
			border-top-right-radius: 30rpx;
			border-top-left-radius: 30rpx;
			color: #fff;
		
			.entry {
				padding: 30rpx;
				background-color: rgba(238, 238, 238, 0.2);
				border-radius: 40rpx;
				font-size: 28rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 30rpx;
		
				.content-title {
					width: 150rpx;
					font-size: 28rpx;
					font-weight: 600;
				}
			}
		
			.tips {
				margin-bottom: 20rpx;
				font-size: 26rpx;
			}
		
			.btn {
				margin-top: 30rpx;
				padding: 30rpx;
			}
		}
	}
</style>